import {DefaultLayoutManager, DefaultStyleManager} from '../base/base-managers.js';
import {IntSliderControl} from '../base/control-factory.js';


export class IconStyleManager extends DefaultStyleManager {
    constructor(plugin) {
        super(plugin);
        this.constants = this.plugin.constants;
        this.selector = this.plugin.config.SELECTOR;
        this.keepBaseStyles = false; // 为避免样式重复，这里就选择不保留基础样式，因为设备预览已保留
    }

    getDynamicStyles() {
        const { PREVIEW_OUTPUT } = this.constants;

        return `
            <style>
                .${this.selector} .widget-label {
                    text-align: left;
                    width: 55px;
                }
                .${PREVIEW_OUTPUT} .highlight .changed {
                    background-color: rgba(255, 235, 59, 0.3); /* 浅黄色背景 */
                    transition: background-color 0.3s ease;
                }
            </style>
        `
    }
}

export class IconLayoutManager extends DefaultLayoutManager {
    constructor(plugin) {
        super(plugin);
        this.constants = this.plugin.constants;
        this.intSliderView = new IntSliderControl(this.plugin, "IntSlider");
    }

    initLayout() {
        const html_content = `
            <div class="${this.constants.PREVIEW_DYNAMIC_CONTAINER} text-decoration-none">
                <div class="${this.constants.PREVIEW_WRAPPER_CONTAINER} text-decoration-none">
                    <div class="${this.constants.PREVIEW_CONTAINER}" 
                        data-bs-toggle="tooltip" 
                        data-bs-placement="auto" 
                        title="${this.constants.CONTROLS_CONFIG.tooltip.default}">
                        <span class="${this.constants.PREVIEW_LOGO}">${this.constants.CONTROLS_CONFIG.logobrand.default}</span>
                    </div>
                    <div class="${this.constants.PREVIEW_TITLE}">${this.constants.CONTROLS_CONFIG.title.default}</div>
                </div>
            </div>
        `;
        this.plugin.$container.prepend(html_content);
    }

    updateLayout(reset) {
        const ref = this;
        const config = this.plugin.getConfig(reset, "update");
        this.plugin._log(`${reset? "重置预览": "更新预览"}，配置信息`, config, "info", this.constants.LOG_PREFIX);

        const $previewWrapper = $(`.${this.plugin.config.SELECTOR} .${this.constants.PREVIEW_WRAPPER_CONTAINER}`);
        const $preview = $previewWrapper.find(`.${this.constants.PREVIEW_CONTAINER}`);
        const $logoBrand = $preview.find(`.${this.constants.PREVIEW_LOGO}`);
        const $IconTitle = $previewWrapper.find(`.${this.constants.PREVIEW_TITLE}`);

        // 更新预览容器样式
        this.plugin.updateIconLink(config.link);

        // 更新预览样式
        $preview.css({
            "--icon-logo-bg": config.logobg,
            "--icon-radius": this.intSliderView.getSliderValue(config.radius, 'radius'),
        }).attr('class', this.constants.PREVIEW_CONTAINER)
            .attr('data-bs-original-title', config.tooltip)
            .attr('data-bs-placement', config.tooltippos)
            .addClass(config.size)
            .addClass(config.animation)
            .addClass(config.shadow === true? "has-shadow" : '');

        // 初始化 Bootstrap Tooltip
        const $tooltipElements = $preview.closest('[data-bs-toggle="tooltip"]');
        $tooltipElements.each(function() {
            ref.plugin.initTooltip(this);  // 使用 jQuery 的 each 回调
        });

        // 更新 logo 品牌
        $logoBrand.css({
            "--logo-color": config.logocolor,
            "--logo-size": this.intSliderView.getSliderValue(config.logosize, 'logosize'),
        }).text(config.logobrand);

        // 更新标题
        $IconTitle.css({
            "--icon-title-color": config.titlecolor,
        }).text(config.title);
    }
}